<script setup>
import { useRoute } from "vue-router";
import { getProductListApi } from "@/api/product.js";
import { ref } from "vue";
import GoodItem from "@/components/GoodItem.vue";

const route = useRoute();
const productList = ref([]);

const getProductList = async () => {
  const res = await getProductListApi(
    route.query.categoryId,
    route.query.search,
    1
  );
  productList.value = res.data.list.data;
};
getProductList();
</script>

<template>
  <div class="search-list">
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-search
      disabled
      show-action
      placeholder="请输入搜索关键词"
      :value="$route.query.search"
      @click="$router.push({ path: '/search' })"
    />
    <div class="sort-btns">
      <div class="sort-item">综合</div>
      <div class="sort-item">销量</div>
      <div class="sort-item">价格</div>
    </div>

    <div class="goods-list">
      <GoodItem
        v-for="item in productList"
        :item="item"
        :key="item.goods_id"
        v-if="productList.length > 0"
      ></GoodItem>
      <van-empty description="暂无商品" v-else />
    </div>
  </div>
</template>

<style scoped lang="scss">
.sort-btns {
  display: flex;
  .sort-item {
    flex: 1;
    text-align: center;
    line-height: 40px;
  }
  .sort-item:nth-child(2) {
    border-left: 1px solid #dbd9d9;
    border-right: 1px solid #dbd9d9;
  }
}
</style>
